<!--本组件用于显示商城主页中间的组件列表-->
<template>
    <div id="MidTacComponent">
        <!--        顶部搜索框和导航栏-->
        <div id="topBar">
            <TopBarComponent></TopBarComponent>
        </div>
        <!--        主要内容-->
        <div id="main">
            <div class="block text-center">
                <el-carousel height="400px" motion-blur>
                    <el-carousel-item v-for="item in 4" :key="item">
                        <h3 class="small justify-center" text="2xl">走马灯{{ item }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import TopBarComponent from "@/components/TopBarComponent.vue";
</script>

<style lang="scss" scoped>
@import "@/style/variables";

#MidTacComponent {
    #topBar {
        height: $HOME_TOP_HEIGHT;
    }

    #main {

    }
}
</style>